<script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from 'vue'

const info = ref('123')

// 生命周期函数的执行顺序，和注册顺序，没有关系
// dom元素加载完毕之后执行，在这里可以发送请求，获取dom元素，操纵dom元素
onMounted(() => {
  console.log('onMounted')
})
onBeforeMount(() => {
  console.log('onBeforeMount')
})

// 数据改变之前
onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})
// 数据改变完毕
onUpdated(() => {
  console.log('onUpdated')
})
</script>

<template>
  <h2 @click="info += '!'">生命周期函数:{{ info }}</h2>
</template>

<style>
table {
  border: 1px solid #000;
  text-align: center;
  width: 240px;
}

th,
td {
  border: 1px solid #000;
}

h3 {
  position: relative;
}
</style>
